<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
	<title>文档上传-思品文档-slidepin.com</title>
	<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
	<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
	<link rel="manifest" href="/manifest.json">
	<meta name="msapplication-TileColor" content="#ffffff">
	<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
	<meta name="theme-color" content="#ffffff">
	<!--[if lt IE 9]>
		<script src="/static/js/lib/html5shiv.min.js"></script>
		<script src="/static/js/lib/respond.min.js"></script>
    <![endif]-->
	<link rel="stylesheet" href="/static/css/base.css">
	<link rel="stylesheet" href="/static/css/common.css">
	<link rel="stylesheet" href="//at.alicdn.com/t/font_768387_6halbm1kqg6.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="/static/css/slide.upload.css">
</head>
<body>
	<?php $this->load->view('common/header');?>
	<div class="layout-container" id="app">
		<div class="panel-heading">
			<h3 class="heading">文档上传<a class="more" href="/hot" target="_blank">了解上传规则</a></h3>
		</div>
		
		<div class="layout-form-box">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" label-position="left" class="demo-ruleForm">
				<el-card shadow="hover" class="layout-form-card" v-for="(item,key) in uploadList" :key="key">
					<div slot="header" class="pb-0 clearfix">
						<p class="file-info">
							<span>{{item.name}}</span>
							<i class="fr el-icon-close"></i>
						</p>
						<p class="progress-box"><el-progress :percentage="100" status="success"></el-progress></p>
					 </div>
					<el-form-item label="文件分类" prop="region">
						<el-select v-model="ruleForm.region" placeholder="请选择活动区域" class="full-width">
						  <el-option label="区域一" value="shanghai"></el-option>
						  <el-option label="区域二" value="beijing"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="文件标题" prop="name">
						<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
					  
					  
					<el-form-item label="内容摘要" prop="desc">
						<el-input type="textarea" v-model="ruleForm.desc"></el-input>
					</el-form-item>
					  
					<el-form-item label="关键词标签">
						<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
							@close="handleClose(tag)"> {{tag}}</el-tag>
						<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue"  ref="saveTagInput" size="small"
							@keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
						</el-input>
						<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
					</el-form-item>
					<el-form-item  style="margin-bottom:0" label="允许下载原文件" prop="delivery">
						<el-switch v-model="ruleForm.delivery"></el-switch>
					</el-form-item>
				</el-card>
			</el-form>
				
		</div>
		<div class="layout-upload-box">
			<div class="layout-upload-score">
				<p>每成功上传一篇未被上传过的文档，有机会获取<span class="text-primary">5积分</span> 奖励。 待积分商城上线，积分可用于兑换各种礼品和权益！</p>
			</div>
			<div class="layout-uploader-box">
				<div class="uploader-box">
					<div id="uploader" class="uploader">
					    <el-upload class="upload" drag action="https://jsonplaceholder.typicode.com/posts/" :auto-upload="false" :show-file-list="false" :on-change="addFiles" multiple>
						  <i class="el-icon-upload"></i>
						  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						  <div class="el-upload__tip" slot="tip">只支持PDF、PPT、PPTX格式的文件（推荐上传PDF文件），且不超过20MB。查看上传规则</div>
						</el-upload>
					</div>
				</div>
			</div>
		</div>
		<div class="layout-upload-rules-box">
			<div class="panel panel-default">
				<div class="panel-body wenku-nopadding">
					<div class="strong">文档上传规则</div>
					<div class="help-block">
						1.带有 <i class="text-danger">*</i> 的表单项为必填项。同时<span class="text-success strong">建议填写文档标签和文档简介，方便自己和他人更快更准确地找到需求文档</span>。
					</div>
					<div class="help-block">
						2.允许上传的最大文档为：<span class="strong text-primary">50.00 MB</span>。
					</div>
					<div class="help-block">
						3.目前支持的文档类型：
						<p>
							<img src="/static/Home/default/img/word_24.png" alt="Word文档"> doc，docx，rtf，wps，odt
						</p>
						<p>
							<img src="/static/Home/default/img/ppt_24.png" alt="PPT文档"> ppt，pptx，pps，ppsx，dps，odp，pot
						</p>
						<p>
							<img src="/static/Home/default/img/excel_24.png" alt="XLS文档"> xls，xlsx，et，ods
						</p>
						<p>
							<img src="/static/Home/default/img/code_24.png" alt="其他文档"> epub，umd，chm，mobi
						</p>
						<p>
							<img src="/static/Home/default/img/text_24.png" alt="TXT文档"> txt
						</p>
						<p>
							<img src="/static/Home/default/img/pdf_24.png" alt="PDF文档"> pdf
						</p>
					</div>
					<div class="help-block">4.上传涉嫌侵权或违法的文档将会被移除。</div>
					<div class="help-block">5.上传的文档和平台中已存在文档重复，上传的文档会被自动移除。</div>
					<div class="help-block">6.严禁上传含有淫秽色情及低俗信息以及其他形式违法违规的文档</div>
					<div class="help-block">7.上传有问题需要帮助？请查看 <a href="/upload/help" target="_blank" title="上传帮助">上传帮助</a> 和 <a href="/feedback" target="_blank" title="意见反馈">意见反馈</a></div>
				</div>
			</div>
		</div>
	</div>
	<?php $this->load->view('common/footer');?>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	<script>
		new Vue({
		  el: '#app',
		  data: function() {
			return { 
				dynamicTags: ['标签一', '标签二', '标签三'],
				inputVisible: false,
				inputValue: '',
				visible: false,
				uploadList:[],
				uploadListForm:[],
				ruleForm: {
				  name: '',
				  region: '',
				  date1: '',
				  date2: '',
				  delivery: false,
				  type: [],
				  resource: '',
				  desc: ''
				},
				rules: {
				  name: [
					{ required: true, message: '请输入活动名称', trigger: 'blur' },
					{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				  ],
				  region: [
					{ required: true, message: '请选择活动区域', trigger: 'change' }
				  ],
				  date1: [
					{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
				  ],
				  date2: [
					{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
				  ],
				  type: [
					{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
				  ],
				  resource: [
					{ required: true, message: '请选择活动资源', trigger: 'change' }
				  ],
				  desc: [
					{ required: true, message: '请填写活动形式', trigger: 'blur' }
				  ]
			
				}
			}
		  },
			methods: {
				
				addFiles(file){
					console.log(file)
					//console.log(file)
					var reader=new FileReader();
					
					 reader.onload= (event)=> {
						 
						var _hash=sha256(event.target.result);
						
						if(_hash){
							file.hash=_hash;
							this.validateHash(_hash,(response)=>{
								if(response){
									this.uploadList.push(file)
								}
							})
							
						}
						
					  };

					 //必须是ArrayBuffer形式，才能和后端计算出来的一致
					 reader.readAsArrayBuffer(file.raw);
					
				},
				
				
				validateHash(hash,callback){
					axios.get('/slide/hash',{
						params: {
						  hash: hash
						}
					  })
					  .then((response)=> {
						  callback&&callback(response);
						console.log(response);
					  })
					  .catch(function (error) {
						console.log(error);
					  });
				},
				
				
				handleClose(tag) {
					this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
				},

				  showInput() {
					this.inputVisible = true;
					this.$nextTick(_ => {
					  this.$refs.saveTagInput.$refs.input.focus();
					});
				  },

				  handleInputConfirm() {
					let inputValue = this.inputValue;
					if (inputValue) {
					  this.dynamicTags.push(inputValue);
					}
					this.inputVisible = false;
					this.inputValue = '';
				  },
				  submitForm(formName) {
					this.$refs[formName].validate((valid) => {
					  if (valid) {
						alert('submit!');
					  } else {
						console.log('error submit!!');
						return false;
					  }
					});
				  },
				  resetForm(formName) {
					this.$refs[formName].resetFields();
				  }
			}
		})
		
		
	</script>
	<script>

	</script>

</body>
</html>
